<%--
  Created by IntelliJ IDEA.
  User: 张俊强~
  Date: 2016/10/26
  Time: 19:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link href="${ctx}/assets/user/css/loginstyle.css" rel="stylesheet">
    <link href="${ctx}/assets/css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
    <script src="${ctx}/assets/js/jquery-1.9.1.js"></script>
    <script src="${ctx}/assets/js/jquery-ui-1.10.3.custom.js"></script>

    <script type="text/javascript" src="${ctx}/assets/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="${ctx}/assets/js/jquery.validate.js"></script>
    <title></title>

    <style type="text/css" rel="stylesheet">
        input.ui-button {
            padding: .2em 1em;
        }
    </style>

</head>
<body>
<form id="loginform" action="${ctx}home">
    <div id="loginarea">
        <div id="username">
            <span>账号：</span>
            <input id="nametext" type="text" name="email" value="请输入邮箱~"/>
        </div>
        <div id="userpsw">
            <span>密码：</span>
            <input id="pswtext" type="text" name="password" value="请输入密码~"/>
        </div>
        <div id="buttonarea">
            <input id="loginbutton" type="submit" value="登陆"/>
        </div>

        <div id="registerarea">
            <a href="#" id="registerbutton">注册</a>
        </div>

    </div>

</form>

<form id="registerform" action="${ctx}userregister">
    <div id="remaildiv">
        <span>邮箱：</span>
        <input id="remail" type="text" name="remail"/>
        <label id="judgeemail" style="font-size: 15px"></label>
    </div>

    <div id="rnamediv">
        <span>昵称：</span>
        <input id="rname" type="text" name="rname"/>
    </div>

    <div id="ruserpswdiv">
        <span>密码：</span>
        <input id="rpassword" type="password" name="rpassword"/>
    </div>

    <div id="euserpswdiv">
        <span>确认密码：</span>
        <input id="epassword" type="password" name="epassword"/>
    </div>


    <div id="handle">
        <input id="submitbutton" type="submit" name="submitbutton" value="提交"/>
    </div>
</form>
<script>
    $("#loginbutton").button();
    $("#submitbutton").button();

    $(function () {
        var path = window.location.pathname.split("/")[0];


        $("#submitbutton").click(function () {
                $.ajax({
                    url: path + "/user/userregister",
                    type: "POST",
                    data: {
                        userName: $("#rname").val(),
                        loginEmail: $("#remail").val(),
                        loginPsw: $("#rpassword").val()
                    },
                    dataType: "json",
                    success: function (json) {
                        if (json.success == true) {
                            alert(json.message);
                            $('#registerform').dialog('close');
                        } else {
                            alert(json.message);
                        }
                    }
                })
        })

        if ($(".error").val() == "格式错误!" || $(".error").val() == "邮箱不得为空!") {
            $("#judgeemail").val("")
        }
        $("#registerform").validate({

            rules: {
                remail: {
                    required: true,
                    email: true,
                    remote: {
                        url: path + "/user/judgeemail",
                        type: "POST",
                        data: {
                            loginEmail: function () {
                                return $("#remail").val();
                            }
                        },
                        dataType: "json",
                        success: function (json) {

                            if (json.success == true) {

                                $("#judgeemail").html(json.message);
                            } else {
                                $("#judgeemail").html(json.message);
                            }
                        }
                    }
                },
                rname: {
                    required: true
                },
                rpassword: {
                    required: true,
                    digits: true,
                    minlength: 6,
                    maxlength: 17
                },
                epassword: {
                    required: true,
                    digits: true,
                    equalTo: "#rpassword"
                }
            },
            messages: {
                remail: {
                    required: "邮箱不得为空!",
                    email: "格式错误!"
                },
                rname: {
                    required: "昵称不能为空!"
                },
                rpassword: {
                    required: "密码(6-17位)!",
                    minlength: "密码(6-17位)!",
                    maxlength: "密码(6-17位)!"
                },
                epassword: {
                    required: "输入错误!",
                    equalTo: "输入不一致!"
                }
            }
        });


        $("#loginbutton").click(function () {
            if ($("#nametext").val() == "" ||
                    $("#nametext").val() == "请输入邮箱~" ||
                    $("#pswtext").val() == "" ||
                    $("#pswtext").val() == "请输入密码~") {
                alert("输入有误，请检查!");
                return false;
            }
        })

        $("#nametext").focus(function () {
            $("#nametext").css("color", "#464646");
            var value = $("#nametext").val();
            if (value == "请输入邮箱~") {

                $("#nametext").val("");
            }
        }).blur(function () {
            if ($("#nametext").val() == "") {
                $("#nametext").css("color", "#8a8a8a");
                $("#nametext").val("请输入邮箱~");
            }
        });

        $("#pswtext").focus(function () {
            $("#pswtext").css("color", "#464646");
            (document.getElementById("pswtext")).type = "password";
            var value = $("#pswtext").val();
            if (value == "请输入密码~") {

                $("#pswtext").val("");
            }
        }).blur(function () {
            if ($("#pswtext").val() == "") {
                (document.getElementById("pswtext")).type = "text";
                $("#pswtext").css("color", "#8a8a8a");
                $("#pswtext").val("请输入密码~");
            }
        });

        $("#loginform").validate({

            submitHandler: function (form) {
                $.ajax({
                    url: path + "/user/login",
                    type: "POST",
                    data: {
                        loginEmail: $("#nametext").val(),
                        userPsw: $("#pswtext").val()
                    },
                    dataType: "json",
                    success: function (json) {
                        if (json.success == true) {
                            $("#pswtext").val("");
                            form.submit();
                        } else {
                            alert(json.message)
                        }
                    }
                });

            }
        });

//        注册验证
        $("#registerform").dialog({autoOpen: false});
        $("#registerbutton").click(function () {
            $("#registerform").dialog("open");

            $("#registerform").dialog({
                title: '注册',
//                buttons:{"提交": function(){
//
//                    this.submit();
//
//                },"取消": function(){
//                    $('#registerform').dialog('close');
//                }},
                height: 400, width: 500,
                resizable: false,
                draggable: false
            });
        })
    })
</script>
<%--<%@include file="/WEB-INF/jsp/test/endline.jsp" %>--%>
</body>
</html>
